<template>
    <div
        ref="myChart"
        id="myChart"
        :style="{ width: '100%', height: '300px' }"
    ></div>
</template>

<script>
import { getCurrentInstance, onMounted } from 'vue';

export default {
    setup() {
        // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
        let internalInstance = getCurrentInstance();
        let echarts =
            internalInstance.appContext.config.globalProperties.$echarts;

        onMounted(() => {
            const dom = document.getElementById('myChart');
            const myChart = echarts.init(dom); // 初始化echarts实例
            const option = {
                // 设置背景色
                backgroundColor: 'rgba(8, 22, 34, 1)',

                //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },

                tooltip: {
                    //提示框组件
                    trigger: 'item',
                    lineStyle: {
                        color: '#000',
                        width: 0.5,
                        type: 'solid'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: [
                        '0:00',
                        '1:00',
                        '2:00',
                        '3:00',
                        '4:00',
                        '5:00',
                        '6:00',
                        '7:00',
                        '8:00',
                        '9:00',
                        '10:00',
                        '11:00',
                        '12:00',
                        '13:00',
                        '14:00',
                        '15:00',
                        '16:00',
                        '17:00',
                        '18:00',
                        '19:00',
                        '20:00',
                        '21:00',
                        '22:00',
                        '23:00'
                    ]
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 6,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#113D5E',
                            width: 1,
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        //数据
                        data: [
                            1, 2, 5, 1, 0, 4, 2, 2, 2, 2, 4, 5, 2, 2, 2, 2, 3,
                            4, 5, 5, 5, 3, 2, 2
                        ],
                        type: 'line',
                        smooth: 0.7,
                        // 设置拐点为实心圆
                        symbol: 'circle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color: '#00FFFF',
                                // 拐点上显示数值
                                label: {
                                    show: false
                                },
                                lineStyle: {
                                    width: 3, // 设置线宽
                                    type: 'solid', //虚实
                                    // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                                    color: '#00FFFF'
                                }
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#FF0000' // hover状态下的拐点颜色
                            }
                        }
                    }
                ]
            };
            // 设置实例参数
            myChart.setOption(option);
        });
        return {};
    }
};
</script>

<style lang="scss">
@import '../../assets/style/tableDeep.scss';
</style>
